<template>
	<view>

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="搜索位置" back-icon-color="#000" :is-back="true" title-color="#000" :background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<view class="map-wrap">
			<view class="map-top">
				<view class="dizhixuan" @click="CityXuanzeshow = true">
					<view>{{MZcity}}</view>
					<u-icon name="arrow-down" color="#999" size="32"></u-icon>
				</view>
				<view class="sousuokuang">
					<u-search placeholder="搜索位置" color="#333" :focus="true" search-icon-color="#999" v-model="sousuokey" :show-action="false" bg-color="#f7f7f7" @change="searchchange"></u-search>
				</view>
			</view>
			<view class="x-weizhi-list-wrap">
				<view class="addresxuanze" v-for="(item,index) in poiss" :key="index" @click="OkSelect(item,index)">
					<view class="xiangxidizhi">
						<rich-text :nodes="item.title"></rich-text>
						<view>{{item.address}}</view>
					</view>
				</view>
			</view>
			<!--<view v-else class="noData_box">
				<image src="/static/images/noData.png" mode="widthFix"></image>
				<view>暂无位置</view>
			</view>-->
		</view>
		
		<u-picker mode="region" v-model="CityXuanzeshow" :params="paramsssss" @confirm="Cityconfirm"></u-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				MZcity: '',
				paramsssss: {
					province: true,
					city: true,
					area: true
				},
				CityXuanzeshow: false,
				mapshow: false,
				sousuokey: '',
				poiss: [],
				morenidx: -1,
				chengshi: '当前位置',

				latitude: '',
				longitude: ''
			}
		},
		onLoad(ops) {
			//console.log(ops)
			let that = this
			that.latitude = ops.lat
			that.longitude = ops.log
			
			that.MZcity = uni.getStorageSync('CityName')
			
		},
		methods: {
			Cityconfirm(e){
				let that = this
				console.log(e)
				// #ifdef APP-PLUS || MP
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/',
					method: 'GET',
					data: {
						address: e.province.label + e.city.label,
						key: '7DZBZ-Q5BWK-23ZJ7-AOV3F-4VZBZ-NCFO3',
					},
					success(Nsssres) {
						console.log('地址获取经纬度', Nsssres.data.result)
						that.longitude = Nsssres.data.result.location.lng
						that.latitude = Nsssres.data.result.location.lat
						that.MZcity = Nsssres.data.result.title
					}
				});
				// #endif
			},
			//搜做周边位置
			searchchange(e) {

				let that = this
				that.morenidx = 0
				//that.poiss = []

				let log = that.longitude
				let lat = that.latitude

				const KEY = '7DZBZ-Q5BWK-23ZJ7-AOV3F-4VZBZ-NCFO3'
				const url = 'https://apis.map.qq.com/ws/place/v1/search'

				// #ifdef H5
				that.$jsonp(url, {
					//orderby: '_distance',
					//filter: 'category=公司企业,娱乐休闲,房产小区,酒店宾馆', //筛选条件
					//get_subpois: 1, //是否返回子地点，如大厦停车场、出入口等取值
					boundary: 'nearby(' + lat + ',' + log + ',1000,1)',
					page_size: 20,
					page_index: 1,
					keyword: that.sousuokey,
					key: KEY,
					output: 'JSON'
				}).then(NresH => {
					

					if (NresH.status === 0) {
						//that.searchList = NresH.data
						
						//console.log('H5-1', NresH)

						if (NresH.data.length === 0) {
							uni.showToast({
								title: '暂无数据',
								icon: 'none',
								duration: 2000
							})
						} else {
							let filterArrh = [];
							// 过滤出符合条件的值
							NresH.data.forEach((item, index) => {
								filterArrh.push({
									ad_info: {
										adcode: item.adcode,
										city: item.city,
										district: item.district,
										province: item.province,
									},
									address: item.address,
									category: item.category,
									id: item.id,
									location: {
										lat: item.location.lat,
										lng: item.location.lng
									},
									//tel: item.tel,
									title: that.join(item.title, e),
									lstTitle: item.title,
									type: item.type,
									//_distance: item._distance
								});
							});

							that.poiss = filterArrh
						}

					} else {
						that.poiss = []
					}

				}).catch(err => {
					
				});
				// #endif


				// #ifdef APP-PLUS || MP
				uni.request({
					url: url,
					method: 'GET',
					data: {
						//orderby: '_distance',
						//filter: 'category=公司企业,娱乐休闲,房产小区,酒店宾馆', //筛选条件
						//get_subpois: 1, //是否返回子地点，如大厦停车场、出入口等取值
						boundary: 'nearby(' + lat + ',' + log + ',1000,1)',
						page_size: 20,
						page_index: 1,
						keyword: e,
						key: KEY,
						output: 'JSON'
					},
					success(Nres) {
						console.log('搜索数据', Nres)
						if (Nres.data.status === 0) {
							//that.searchList = Nres.data.data
							if (Nres.data.data.length === 0) {
								uni.showToast({
									title: '暂无数据',
									icon: 'none',
									duration: 2000
								})
							} else {
								let filterArr = [];
								// 过滤出符合条件的值
								Nres.data.data.forEach((item, index) => {
									filterArr.push({
										ad_info: {
											adcode: item.adcode,
											city: item.city,
											district: item.district,
											province: item.province,
										},
										address: item.address,
										category: item.category,
										id: item.id,
										location: {
											lat: item.location.lat,
											lng: item.location.lng
										},
										//tel: item.tel,
										title: that.join(item.title, e),
										lstTitle: item.title,
										type: item.type,
										//_distance: item._distance
									});
								});

								that.poiss = Nres.data.data// filterArr
								////console.log(that.searchList)
							}

						} else {
							that.poiss = []

						}
					}
				});
				// #endif
			},
			// 拼接
			join(str, key) {
				var reg = new RegExp((`(${key})`), "gm");
				var replace = '<span style="color:#FF611E;font-weight:bold;">$1</span>';
				return str.replace(reg, replace);
			},
			OkSelect(data, index) {
				console.log('地址',data)
				let that = this
				that.morenidx = index


				// let SelectedCity = data.ad_info.city
				// let presentCity = uni.getStorageSync('CityName')

				//判断当前定位城市如果不等于选择的城市 就不能切换位置 不能跨城市选择
				// if (presentCity != SelectedCity) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		showCancel: false,
				// 		content: '不能切换到定位之外的其他城市',
				// 		confirmText: '我知道了',
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				//console.log('用户点击确定');
				// 			} else if (res.cancel) {
				// 				//console.log('用户点击取消');
				// 			}
				// 		}
				// 	});
				// } else {


					/*uni.setStorageSync('lat', data.location.lat);
					uni.setStorageSync('lng', data.location.lng);
					uni.setStorageSync('address', data.title);
					uni.$emit('Getlist', {
						id: 1,
					});*/

					let addressObj = {
						address: {
							// #ifdef H5 || MP
							poistitle: data.title,
							// #endif

							// #ifdef APP-PLUS
							poistitle: data.title,
							//poistitle: data.title,
							// #endif

							address: data.address,
							
							city: data.ad_info.city,
							province: data.ad_info.province
						},
						longitude: data.location.lng,
						latitude: data.location.lat
					}

					uni.$emit('GetAddressData', {
						data: addressObj,
					});

					uni.navigateBack({
						delta: 2
					})

				//}
			},
		}
	}
</script>

<style lang="scss">
	.noData_box {
		margin-top: 0;
		text-align: center;
		color: #999;

		image {
			width: 340rpx;
		}

		.lijipay {
			width: 30%;
			position: relative;
			margin: 0 auto;

			.u-size-default {
				height: 70rpx !important;
				line-height: 70rpx !important;
			}
		}
	}

	.map-wrap {
		padding: 30rpx;

		.map-top {
			background-color: #ffffff;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.dizhixuan {
				display: flex;
				align-items: center;
				margin-right: 10rpx;
			}

			.bianbiano {
				width: 100rpx;
				height: 10rpx;
				background-color: #eaeaea;
				border-radius: 200rpx;
				margin: 30rpx auto 30rpx;
			}
			
			.sousuokuang {
				flex: 1;
			}
		}

		.xzbgcolor {
			background-color: #ffe62e !important;
			color: #333333 !important;

			view:nth-child(2) {
				color: #333333 !important;
			}
		}

		

		.x-weizhi-list-wrap {
			padding: 0 0 0 0;

			.addresxuanze {
				background-color: #f7f7f7;
				border-radius: 14rpx;
				padding: 26rpx 20rpx;
				margin-bottom: 30rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.xiangxidizhi {
					view:nth-child(1) {
						margin-bottom: 10rpx;
						font-weight: bold;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					view:nth-child(2) {
						display: flex;
						align-items: center;
						color: #999999;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
				}

				.xuanzicon {
					//position: absolute;
					//right: 12rpx;
					//top: 16rpx;
				}
			}
		}
	}
</style>